<template>
    <div style="margin: 15px 0">
        <a-space>
            <span>创建者</span>
            <a-select :options="userOptions" v-model:value="createId" placeholder="请选择" style="width: 100px"></a-select>
            任务状态
            <a-radio-group v-model:value="status" option-type="button" :options="ruleStatusOptions3" />
            <a-input v-model:value="searchValue" style="width: 260px" placeholder="搜索任务名">
                <template #addonBefore>
                    <a-select v-model:value="searchField" style="width: 90px">
                        <a-select-option value="task_name">任务名</a-select-option>
                        <a-select-option value="description">描述</a-select-option>
                    </a-select>
                </template>
            </a-input>
            <a-button type="primary" style="width: 100px" @click="searchFunc">
                <template #icon>
                    <SearchOutlined />
                </template>
                搜索
            </a-button>
            <a-button type="dashed" @click="toEsCommonSearch"> 添加任务 </a-button>
            <br />
            <br />
            <br />
            <br />
            <a-dropdown>
                <a-button @click.prevent type="link">
                    开启后台程序
                    <DownOutlined />
                </a-button>
                <template #overlay>
                    <a-menu>
                        <a-menu-item>
                            <span @click="startExe(1)">程序1(获取URL)</span>
                        </a-menu-item>
                        <a-menu-item>
                            <span @click="startExe(2)">程序2(获取数据)</span>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
            <a-dropdown>
                <a-button @click.prevent type="link" danger>
                    关闭后台程序
                    <DownOutlined />
                </a-button>
                <template #overlay>
                    <a-menu>
                        <a-menu-item>
                            <span @click="stopExe(1)">程序1(获取URL)</span>
                        </a-menu-item>
                        <a-menu-item>
                            <span @click="stopExe(2)">程序2(获取数据)</span>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </a-space>
    </div>
    <a-spin :style="spinStyle" :spinning="tableLoading">
        <a-table
            sticky
            :scroll="{ x: 2200 }"
            :row-selection="rowSelection"
            :rowKey="(row: any) => JSON.stringify(row)"
            :columns="columns"
            :data-source="tableData"
            bordered
            :pagination="false"
            size="small"
            @change="handleTableChange"
            class="table"
        >
        </a-table>
        <a-row justify="center" v-if="total > 10" style="margin-top: 10px">
            <a-pagination
                v-model:current="page"
                v-model:pageSize="size"
                show-quick-jumper
                showSizeChanger
                :total="total"
                :page-size-options="pageSizeOptions"
                @change="pageChange"
                :show-total="(total: number) => `总计 ${total} 项`"
            />
        </a-row>
    </a-spin>
</template>

<script lang="ts" setup>
    import { useSpinLoadingState } from "@/hooks/useCommon";
    import { useColumns } from "@/hooks/useBaiduSite";
    import { SearchOutlined, DownOutlined } from "@ant-design/icons-vue";
    import { message } from "ant-design-vue";
    import { baiduSiteRestFulApi, startExeApi, stopExeApi } from "@/api/baiduSite";
    import { toUrl } from "@/utils/common";
    import { useCommonStaticOptions } from "@/hooks/useEsArticleCommon";
    const { ruleStatusOptions3 } = useCommonStaticOptions();
    const createId = ref(0);
    const { columns, isReloadData, userOptions } = useColumns();
    const { spinStyle, viewLoading: tableLoading } = useSpinLoadingState();
    const pageSizeOptions = ref<string[]>(["10", "20", "50", "100", "500", "1000"]);
    // 查询总数
    const total = ref(0);
    // 表格数据
    const tableData = ref([]);
    const page = ref(1);
    const size = ref(10);
    // 收集行key
    const selectedRowKeys = ref<Array<number>>([]);
    const sortObj = reactive({ order: "", sort_field: "" });
    // 表格排序发生改变
    const handleTableChange = (pag: any, filters: any, sorter: any) => {
        if (sorter.order) {
            sortObj.order = sorter.order.slice(0, sorter.order.length - 3);
            sortObj.sort_field = sorter.field;
        } else {
            sortObj.order = "";
        }
        searchFunc();
    };
    // 行Key
    const rowSelection = ref<any>({
        checkStrictly: false,
        onSelect: (_: boolean, __: boolean, selectedRows: Array<Record<string, any>>) => {
            selectedRowKeys.value = selectedRows.map((item) => item["id"]);
        },
        onSelectAll: (_: boolean, __: boolean, selectedRows: Array<Record<string, any>>) => {
            selectedRowKeys.value = selectedRows.map((item) => item["id"]);
        }
    });
    const searchField = ref("task_name");
    const searchValue = ref("");
    const status = ref(0);
    // 搜索
    const searchFunc = () => {
        tableLoading.value = true;
        // 搜索的条件
        const params = {
            page: page.value,
            page_size: size.value,
            status: status.value,
            search_field: searchField.value,
            search: searchValue.value,
            create_id: createId.value,
            ...sortObj
        };
        baiduSiteRestFulApi(params, "get")
            .then((res) => {
                tableData.value = res.data.data;
                total.value = res.data.count;
            })
            .catch(() => message.error("超时！"))
            .finally(() => {
                isReloadData.value = false;
                tableLoading.value = false;
            });
    };
    // 页码更新
    const pageChange = (pageNumber: number) => {
        page.value = pageNumber;
        searchFunc();
    };
    // 添加关键词和网站信息
    const toEsCommonSearch = () => {
        window.open(toUrl("/esarticle/es-action?host=http://192.168.1.90:9200&index=keywords"), "_blank");
    };
    watch(isReloadData, (v) => {
        v && setTimeout(searchFunc, 200);
    });
    onMounted(() => {
        // 延迟
        const route = useRoute();
        searchFunc();
    });
    const startExe = (type: 1 | 2) => {
        startExeApi(type)
            .then(() => {
                message.success("操作成功!");
            })
            .catch(() => {
                message.error("操作失败!");
            });
    };
    const stopExe = (type: 1 | 2) => {
        stopExeApi(type)
            .then(() => {
                message.success("操作成功!");
            })
            .catch(() => {
                message.error("操作失败!");
            });
    };
</script>

<style scoped lang="scss"></style>
